<template>
  <BasicLayout>
    <div class="page" id="page">
    <div class="page-template">
      <div>
        <Breadcrumb :options="brand"></Breadcrumb>
      </div>
      <el-row>
        <el-col :span="24" class="page-template-content">
          <slot name="content"></slot>
        </el-col>
      </el-row>
      <!-- <div class="page-template-content">
        <slot name="content"></slot>
      </div> -->
    </div>
    </div>
  </BasicLayout>
</template>
<script>
import Breadcrumb from './Breadcrumb'
import BasicLayout from '@/components/common/BasicLayout'
import { mapState } from 'vuex'
import { EleResize } from '@/utils/esresize'
export default {
  /**
   * 页面模板组件
   */
  name: 'PageTemplate',
  props: {
  },
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
    // 获取浏览器可视区域高度
    let that = this
    this.$nextTick(function () {
      that.pageHandleStyle()
    })
  },
  components: { BasicLayout, Breadcrumb },
  computed: {
    ...mapState({
      brand: state => state.common.curIndexName
    })
  },
  methods: {
    pageHandleStyle () { // 设置page 高度背景满屏
      let clientHeight = document.documentElement.clientHeight
      // 90 el-header 71 RootMenug 5 <el-row class="row-empty-5"></el-row>;
      let page = document.getElementById('page')
      page.style.height = (clientHeight - 90 - 71 - 5) + 'px'
    }
  },
  watch: {
  }
}
</script>
<style lang="scss">
.page {
  background-color: #F7F7F7;
  position: relative;
}
.page-template {
  background-color: #F7F7F7;
  .page-template-content {
    padding: 30px;
  }
}
</style>
